﻿@page "/toast/default-functionalities"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Notifications

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the basic layout of a Toast to show simple notification and hide them.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>Toast</code> is a notification pop-up used to display on the desired position with required message and header icons.</p>
    <ul>
      <li>The header text is set using the <code>Title</code> property.</li>
      <li>Information to be displayed is set using the <code>Content</code> property.</li>
    </ul>
  <p>More information about Toast can be found in this <a href="https://blazor.syncfusion.com/documentation/toast/getting-started/" target="_blank"> documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section toast-default-section">
    <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">
        <ToastPosition X="@ToastPosition"></ToastPosition>
    </SfToast>
    <div class="col-lg-12 col-sm-12 col-md-12 center">
        <div id="toastBtnDefault" style="margin: auto;text-align: center">
            <button class="e-btn" @onclick="@ShowOnClick">Show Toasts</button>
            <button class="e-btn" @onclick="@HideOnClick">Hide All</button>
        </div>
    </div>
</div>

<style>
    #toast_default .e-meeting::before {
        content: "\e705";
        font-size: 17px;
    }
    .bootstrap4 #toast_default .e-meeting::before {
        content: "\e763";
        font-size: 20px;
    }
    .tailwind #toast_default .e-meeting::before {
        content: "\e7a1";
        font-size: 18px;
    }
    
</style>

@code {
    SfToast ToastObj;

    private string ToastPosition = "Right";
    private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";

    private async Task ShowOnClick()
    {
        await this.ToastObj.ShowAsync();
    }

    private async Task HideOnClick()
    {
        await this.ToastObj.HideAsync("All");
    }
}
